<template>
  <div id="SP">
    <van-sticky>
      <section class="nav">
        <section class="n1">
          <span class="iconfont icon-xitongfanhui" @click="fn()"></span>
        </section>
        <section class="n2">人气热销空军一号跑鞋</section>
        <section class="n3">
          <span class="iconfont icon-fanhui">
            <van-cell @click="showShare = true" />
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
            />
          </span>
        </section>
      </section>

      <section class="onav">
        <ul>
          <li>
            <span>综合</span>
          </li>
          <li>
            <span>累计销量</span>
          </li>
          <li>
            <span>近7天销量</span>
          </li>
          <li>
            <span>价格</span>
          </li>
          <li>
            <span>新品</span>
          </li>
          <li>
            <span>筛选</span>
          </li>
        </ul>
      </section>
    </van-sticky>

    <section class="Xmain">
        <SpXie />
       
    </section>
  </div>
</template>

<script>

import { Toast } from "vant";
import SpXie from "@/components/SpXie.vue"
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    fn() {
      this.$router.go(-1);
    },
  },
  components:{
      SpXie
  },
  // created() {
  //   axios({
  //     url: "/data/mock",
  //     method: "get",
  //   })
  //     .then((ok) => {
  //       this.xie = ok.data.xie;
  //     })
  //     .catch((err) => {
  //       console.log("请求失败了", err);
  //     }); 
  // },
};
</script>

<style scoped>
#SP {
  width: 100%;
  height: 100%;
  /* background-color: skyblue; */
}
#SP .nav {
  width: 100%;
  height: 0.52rem;
  background: white;
  position: relative;
}
#SP .nav .n2 {
  text-align: center;
  line-height: 0.52rem;
  font-size: 0.18rem;
  font-weight: 700;
}
#SP .nav .n1 {
  width: 0.18rem;
  height: 0.18rem;

  position: absolute;
  margin-left: 0.2rem;
  margin-top: 0.17rem;
}
#SP .nav .n3 {
  width: 0.18rem;
  height: 0.18rem;

  margin-left: 88%;
  margin-top: -0.33rem;
}
.van-cell {
  position: absolute;
  margin-top: -0.1rem;
  opacity: 0;
}
#SP .onav {
  width: 100%;
  height: 0.4rem;
  background-color: white;
  overflow-x: hidden;
}
#SP .onav ul {
  display: flex;
  justify-content: space-around;
}
#SP .onav ul li {
  text-align: center;
  line-height: 0.4rem;
}
#SP .onav ul li span:hover {
  color: #68c2c8;
}

</style>